import React from 'react';
import { message } from "antd";
import {FullscreenOutlined,FullscreenExitOutlined} from '@ant-design/icons'
import {useState} from "react";
import screenfull from 'screenfull'

import '@/layouts/components/Head/index.less'

function Fullscreen() {
    const [fullscreen, setfullscreen] = useState<boolean>(false);
    const changeFullScreen = () => {
        if (!screenfull.isEnabled) message.warning("当前您的浏览器不支持全屏 ❌");
        screenfull.toggle();
        setfullscreen(!fullscreen)
    }
    return (
        <div onClick={changeFullScreen} className="fullscreenArea" id="id_fullscreen_Area">
            {
                fullscreen?<FullscreenExitOutlined className="fullIcon"/>:<FullscreenOutlined className="fullIcon"/>
            }
        </div>
    );
}

export default Fullscreen;
